<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Examples</title>
    <link rel="stylesheet nofollow" type="text/css" href="http://code.google.com/css/codesite.css"/>
    <link rel="stylesheet nofollow" type="text/css" href="http://gmaps-utility-library.googlecode.com/svn/trunk/util/docs/template/local_extensions.css"/>
    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<div>
<a name="Top"></a>  
<h1><a></a><span lang="en-us">Key DragZoom</span> Examples</h1>
</div>
<div>
<h2><a name="HowTo"></a>Include Scripts</h2>
<p>
The first step is to include <code><span lang="en-us">keydragzoom</span>.js</code> or 
    <code><span lang="en-us">keydragzoom</span>_packed.js</code> 
in your document header, after GMaps API is load. You can use the online version if you do not want to download the script.</p>
    <pre class="prettyprint">
      &lt;script src=&quot;/path/to/keydragzoom_packed.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    </pre>
</div>

<div><h2><span lang="en-us">Enable Drag Zoom</span></h2> 
<p><span lang="en-us">You can simply call GMap2.enableKeyDragZoom() to enable it, just 
    the same way you call GMap2.enableScrollWheelZoom().</span></p>

<pre class="prettyprint">
        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
       <span lang="en-us">   map.enableKeyDragZoom();</span>  
        }
    </pre>

<p>
<a href="../examples/dragzoom.html">View example </a> |
<a href="../examples/dragzoom.html?packed">Packed </a> |
</p>
</div>

<div><h2><span lang="en-us">Style Zoom Box</span></h2> 
<p>You can pass some css properties when you enable dragZoom. They will be applied to the zoom box. In the following example, 
the zoom box is half transparent with yellow with a 3 pixel thick blue border</p>

<pre class="prettyprint">
        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
          map.enableKeyDragZoom({
                boxStyle: {
                  border: "thick dashed black",
                  backgroundColor: "red",
                  opacity: 0.5
                },
                paneStyle: {
                  backgroundColor: "gray",
                  opacity: 0.2
                }
          });
        }
    </pre>

<p>
<a href="../examples/stylebox.html">View example </a> |
<a href="../examples/stylebox.html?packed">Packed </a> |
</p>
</div>
<div><h2><span lang="en-us">Use Different Key</span></h2> 
<p>If you do not want using the SHIFT key as you drag, you can passing one of the other two keys: ALT or CTRL.
In the following example, you can drag zoom by hold the CTRL key</p>

<pre class="prettyprint">
        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
          map.enableKeyDragZoom({
            key: 'ctrl'
          });
        }
    </pre>

<p>
<a href="../examples/ctrlkey.html">View example </a> |
<a href="../examples/ctrlkey.html?packed">Packed </a> |
</p>
</div>
<div><h2><span lang="en-us">Multiple Map</span></h2> 
<p>Each map has its own drag zoom tool.</p>

<pre class="prettyprint">
        function init(){
          var map1 = new GMap2(document.getElementById("map1"));
          map1.enableKeyDragZoom();
          var map2 = new GMap2(document.getElementById("map1"));
          map2.enableKeyDragZoom();
        }
    </pre>

<p>
<a href="../examples/multimap.html">View example </a> |
<a href="../examples/multimap.html?packed">Packed </a> |
</p>
</div>

<div><h2><span lang="en-us">Events</span></h2> 
<p>The dragzoom tool triggers different events at key moments of the drag zoom operation.</p>

<pre class="prettyprint">
       map.enableKeyDragZoom();
          var dz = map.getDragZoomObject();
          GEvent.addListener(dz, 'activate', function() {
            GLog.write('DragZoom Activated');
          });
          GEvent.addListener(dz, 'dragstart', function() {
            GLog.write('DragZoom Started');
          });
          GEvent.addListener(dz, 'drag', function() {
            GLog.write('DragZoom Dragging...');
          });
        }
    </pre>

<p>
<a href="../examples/events.html">View example </a> |
<a href="../examples/events.html?packed">Packed </a> |
</p>

          
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3946449-5");
pageTracker._trackPageview();
</script>
</body>
</html>
